<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            height: 200px;
            width: 200px;
            border: 2px solid #000;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
        }

        #wrap ul {
            margin: 0;
            padding: 0;
            height: 200px;
            position: relative;
            list-style: none;
        }

        #wrap ul li {
            width: 2px;
            height: 6px;
            background: #000;
            position: absolute;
            left: 99px;
            top: 0;
            transform-origin: center 100px;
        }

        /* #wrap ul li:nth-of-type(1) {
        transform: rotate(0)
    }

    #wrap ul li:nth-of-type(2) {
        transform: rotate(6deg)
    }

    #wrap ul li:nth-of-type(3) {
        transform: rotate(12deg)
    }

    #wrap ul li:nth-of-type(4) {
        transform: rotate(18deg)
    }

    #wrap ul li:nth-of-type(5) {
        transform: rotate(24deg)
    }

    #wrap ul li:nth-of-type(6) {
        transform: rotate(30deg)
    }

    #wrap ul li:nth-of-type(7) {
        transform: rotate(36deg)
    }

    #wrap ul li:nth-of-type(8) {
        transform: rotate(42deg)
    } */

        #wrap ul li:nth-of-type(5n+1) {
            height: 12px;
        }

        #hour {
            width: 6px;
            height: 45px;
            background: #000;
            position: absolute;
            left: 97px;
            top: 55px;
            border-radius: 5px;
            transform-origin: bottom;
        }

        #min {
            width: 4px;
            height: 65px;
            background: #f60;
            position: absolute;
            left: 98px;
            top: 35px;
            border-radius: 5px;
            transform-origin: bottom;
        }

        #sec {
            width: 2px;
            height: 80px;
            background: red;
            position: absolute;
            left: 99px;
            top: 20px;
            border-radius: 5px;
            transform-origin: bottom;
        }

        .icon {
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 95px;
            top: 95px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul id="list">
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div class="icon"></div>
    </div>
    <script src="./js/util.js"></script>
    <script>
        var oList = document.getElementById('list');
        var oMin = get('#min');
        var oHour = get('#hour');
        var oSec = get('#sec');
        var aLi = "";
        for (let i = 0; i < 60; i++) {
            aLi += `<li style="transform: rotate(${(i)* 6}deg)"></li>`
        }
        oList.innerHTML = aLi;
        toTime();
        setInterval(toTime, 1000);
        function toTime() {
            var oDate = new Date();
            var iSec = oDate.getSeconds();
            var iMin = oDate.getMinutes()+iSec/60;
            var iHour = oDate.getHours()+iMin/60;
            
            oSec.style.WebkitTransform = `rotate(${iSec * 6}deg)`
            oMin.style.WebkitTransform = `rotate(${iMin * 6}deg)`
            oHour.style.WebkitTransform = `rotate(${iHour * 30}deg)`
        }
    </script>
</body>

</html>